import React , { useEffect , useState } from 'react';
import { Table , Space , Button , Popconfirm , Drawer, Input, Select, Tree , Modal } from "antd"

import { getAdminList , deleteAdmin , addAdmin, updateAdmin } from "../../api/admin"
import menus from "../../router/menus"



const Com = () => {

  const [adminList , setAdminList] = useState([])

  useEffect(() => {
    let istrue = true
    getAdminList().then(res => {
      if(istrue) {
        setAdminList(res.data.data)
        console.log(res);
      }
    })
   
    return () => {
      istrue = false
    }
  } , [])
  
  const [current, setCurrent] = useState(1)
  const [pageSize, setPageSize] = useState(5)

  const columns = [
    {
      title: '序号',
      render (text, record, index) { return <span>{ (current - 1) * pageSize + index + 1}</span>}
    },
    {
      title: '管理员账户',
      dataIndex: 'adminname'
    },
    {
      title: '权限',
      dataIndex: 'role'
    },
    {
      title: '操作',
      render (text, record) {
        return (
          <Space>
            <Button onClick={() => {
            
              setIsModalVisible(true)
                setAdminname(record.adminname)
              setRole(record.role)
              setCheckedKeys(record.checkedKeys)
            }}  
            type='primary'>编辑</Button>

            <Popconfirm
              title = "确定删除吗"
              okText="确定"
              cancelText="取消"
              onConfirm = {() => {
                deleteAdmin({ adminid: record.adminid }).then(() => {
                  getAdminList().then(res => setAdminList(res.data.data))
                })
              }}  
              onCancel = {() => {}}  
            >
              <Button danger>删除</Button>
            </Popconfirm>

          </Space>
        )
      }
    }
  ]

  const [visible , setVisible] = useState(false)
  const [checkedKeys , setCheckedKeys ] = useState(['0-0'])
  const [adminname , setAdminname] = useState('')
  const [password , setPassword] = useState('123456')
  const [role , setRole] = useState(1)
  // 编辑管理员
  const [isModalVisible , setIsModalVisible] = useState(false)


    return (
      <Space direction='vertical' style={{width:'100%'}} >
        <Space>
          <Button type='primary' onClick={() => {setVisible(true)}}>添加管理员</Button>
        </Space>
        <Table 
          dataSource={adminList} 
          columns={columns }  
          rowKey={(record) => record.adminid}
          pagination={
            {
              position:['bottomCenter'], //页码位置      
              current:current,
              pageSize:pageSize,
              onChange (page,pageSize) {
                setCurrent(page)
                setPageSize(pageSize)
              },

            }
          }    
        >
        </Table>
         {/* 抽屉 - 添加管理员 */}
         <Drawer title="添加管理员" visible={visible} placement="right" onClose={()=> {setVisible(false)}}>
            <Space direction="vertical" style={{ width: '100%' }}>
              <Input value={adminname} onChange = { (e) => setAdminname(e.target.value) } placeholder="管理员账户"></Input>
              <Input value={password} onChange = { (e) => setPassword(e.target.value) } placeholder="管理员密码"></Input>
              <Select value={role} onChange = { (val) => setRole(val) } defaultValue="1" style={{width: '100%'}}>
                <Select.Option value={1}>管理员</Select.Option>
                <Select.Option value={2}>超级管理员</Select.Option>
              </Select>
              <h3>该管理员拥有的菜单栏权限</h3>
              <Tree
                checkable
                treeData={menus}
                checkedKeys = { checkedKeys }
                onCheck = { checkedKeys => {
                  setCheckedKeys(checkedKeys)
                  console.log(checkedKeys);
                }}
              />
              <Button type="primary" onClick={() => {
                addAdmin({
                  adminname, password, role, checkedKeys
                }).then(() => {
                  // 重置表单
                  setAdminname('')
                  setPassword('123456')
                  setRole(1)
                  setCheckedKeys(['0-0'])
                  setVisible(false) // 隐藏抽屉
                  getAdminList().then(res => setAdminList(res.data.data))
                })
              }}>添加管理员</Button>
            </Space>
         </Drawer>

          {/* 对话框 - 编辑管理员 */}
        <Modal title="编辑管理员" 
          visible={isModalVisible} 
          footer = { null }
          onCancel = { () => {
            setIsModalVisible(false)
          }}
          closable
        >
          <Space direction="vertical" style={{ width: '100%' }}>
            <Input  value={adminname} onChange = { (e) => setAdminname(e.target.value) } placeholder="管理员账户"></Input>
            <Select value={role} onChange = { (val) => setRole(val) } defaultValue="1" style={{width: '100%'}}>
              <Select.Option value={1}>管理员</Select.Option>
              <Select.Option value={2}>超级管理员</Select.Option>
            </Select>
            <h3>修改该管理员拥有的菜单栏权限</h3>
            <Tree
               checkable
               treeData={menus}
               checkedKeys = { checkedKeys }
               onCheck = { val => {
                 setCheckedKeys(val)
                 console.log(val);
               }}

            />
            <Button type="primary" onClick={() => {
              updateAdmin({
                adminname, role, checkedKeys
              }).then(() => {
                setAdminname('')
                setRole(1)
                setCheckedKeys(['0-0'])
                setIsModalVisible(false)
                getAdminList().then(res => setAdminList(res.data.data))
              })
            }}>更新</Button>
          </Space>
        </Modal>
      </Space>
    );

}

export default Com